import { Button, Form, Input, Toast } from "antd-mobile"
import s from "./style.module.less"
import { useState } from "react"
import { modifyPassApi } from "@/apis"
function Account() {
  const [beforepwd, setbeforepwd] = useState("")
  const [newpwd, setnewpwd] = useState("")
  const [confirmpwd, setconfirmpwd] = useState("")

  const submit = async () => {
    if (newpwd !== confirmpwd) {
      Toast.show("新密码输入不一致")
      return
    }
    let data = {
      old_pass: beforepwd,
      new_pass: newpwd,
      new_pass2: confirmpwd,
    }
    await modifyPassApi(data)
    Toast.show("修改成功")
  }
  return (
    <div className={s.account}>
      <div className={s.header}>重置密码</div>
      <div className={s.form}>
        <Form layout="horizontal">
          <Form.Item label="原密码" name="beforepwd">
            <Input
              placeholder="请输入原密码"
              clearable
              onChange={(val) => setbeforepwd(val)}
            />
          </Form.Item>
          <Form.Item label="新密码" name="newpwd">
            <Input
              placeholder="请输入新密码"
              clearable
              onChange={(val) => setnewpwd(val)}
            />
          </Form.Item>
          <Form.Item label="确认密码" name="confirmpwd">
            <Input
              placeholder="请输入确认密码"
              clearable
              onChange={(val) => setconfirmpwd(val)}
            />
          </Form.Item>
        </Form>
        <Button
          block
          color="primary"
          size="large"
          className={s.button}
          onClick={submit}
          style={{ height: "61px", fontSize: "23px" }}
        >
          提交
        </Button>
      </div>
    </div>
  )
}

export default Account
